<template>
  <div style="display: flex; align-items: center">
    <n-button circle size="small" @click="showModal = true">
      <lucide-icon name="Search" />
    </n-button>
    <n-modal v-model:show="showModal">
      <n-card
        style="width: 1000px"
        :title="`选择${title}`"
        size="huge"
        role="dialog"
        aria-modal="true"
      >
        <template #header-extra>
          <n-button type="tertiary" quaternary @click="showModal = false">
            <lucide-icon name="X" />
          </n-button>
        </template>
        <n-data-table
          v-model:checked-row-keys="state.checkedRowKeys"
          striped
          :row-key="rowKey"
          :columns="props.dataMode === 'role' ? roleColumns : userColumns"
          :data="state.list"
          :pagination="pagination"
          :max-height="400"
        />
        <template #footer>
          <n-space justify="end">
            <n-button secondary @click="showModal = false">
              <div style="display: flex; align-items: center; gap: 2px">
                <lucide-icon name="X" />
                取消
              </div>
            </n-button>
            <n-button type="info" secondary @click="onSelect">
              <div style="display: flex; align-items: center; gap: 2px">
                <lucide-icon name="Check" />
                选择
              </div>
            </n-button>
          </n-space>
        </template>
      </n-card>
    </n-modal>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, onMounted, computed } from 'vue'
  import { NCard, NSpace } from 'naive-ui'
  import { userApi } from '@/api/modules/user'
  import { roleApi } from '@/api/modules/role'
  import type { Assign, DataMode } from './type.d'

  const props = defineProps<{ multiple: boolean; dataMode: DataMode }>()
  const emits = defineEmits(['select'])

  const showModal = ref(false)
  const state = reactive({ list: [] as any[], checkedRowKeys: [] as any[] })
  const title = computed(() => (props.dataMode === 'role' ? '角色' : '用户'))
  const rowKey = (row: any) =>
    props.dataMode === 'role' ? `${row.roleId}@${row.roleName}` : `${row.userId}@${row.userName}`

  const roleColumns = [
    {
      type: 'selection',
      multiple: props.multiple
    },
    { title: '编号', key: 'roleCode' },
    { title: '名称', key: 'roleName' }
  ]
  const userColumns = [
    {
      type: 'selection',
      multiple: props.multiple
    },
    { title: '编号', key: 'userCode' },
    { title: '姓名', key: 'userName' },
    { title: '手机号', key: 'cellphone' },
    { title: '职位', key: 'positionName' }
  ]

  const pagination = reactive({
    page: 1,
    pageSize: 30,
    showSizePicker: true,
    pageSizes: [10, 30, 50, 100],
    onChange: (page: number) => {
      pagination.page = page
      findList()
    },
    onUpdatePageSize: (pageSize: number) => {
      pagination.pageSize = pageSize
      pagination.page = 1
      findList()
    }
  })

  onMounted(() => findList())

  const findList = () => {
    const params = { pageNum: pagination.page, pageSize: pagination.pageSize }
    let request: Promise<any>
    if (props.dataMode === 'role') {
      request = roleApi.findListPage(params)
    } else {
      request = userApi.findListPage(params)
    }
    request.then((resp: any) => {
      if (resp.success) {
        state.list = resp.data.list
      }
    })
  }

  const onSelect = () => {
    if (state.checkedRowKeys && state.checkedRowKeys.length > 0) {
      const list = state.checkedRowKeys.map((row: any) => {
        const data = row.split('@')
        return { id: data[0], name: data[1] } as Assign
      })
      emits('select', list as Assign[])
      showModal.value = false
    }
  }
</script>

<style lang="scss" scoped></style>
